<template>
  <div class="rose-echart">
    <base-echart :options="options"></base-echart>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import baseEchart from "@/base-ui/echarts";

export default defineComponent({
  components: { baseEchart },
  props: {
    roseData: {
      type: Array,
      requirt: true,
      defalut: () => [],
    },
  },
  setup(props) {
    const options = {
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          // dataView: { show: true, readOnly: false },
          // restore: { show: true },
          // saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [15, 120],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: props.roseData,
        },
      ],
    };
    return {
      options,
    };
  },
});
</script>
